<template>
  <v-app>
    <v-app-bar
      app
      color="primary"
      dark
    >
      <div class="d-flex align-center">
        <!-- <v-img
          alt="Vuetify Logo"
          class="shrink mr-2"
          contain
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
          transition="scale-transition"
          width="40"
        />

        <v-img
          alt="Vuetify Name"
          class="shrink mt-1 hidden-sm-and-down"
          contain
          min-width="100"
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
          width="100"
        /> -->
        <span class="display-1">Webango Admin</span>
      </div>

      <v-spacer></v-spacer>

      <v-btn
        href="https://gitee.com/CyberSecurityLZFY/SSLWebServer"
        target="_blank"
        text
      >
        <span class="mr-2">Gitee Repo</span>
        <v-icon>mdi-open-in-new</v-icon>
      </v-btn>
    </v-app-bar>

    <v-content>
      <v-breadcrumbs :items="items" large></v-breadcrumbs>
      <router-view></router-view>
    </v-content>
  </v-app>
</template>

<script>
const initItem = [
        {
          text: '首页',
          disabled: false,
          href: '/',
        },
]
export default {
  name: 'App',

  // components: {
  //   dataTable,
  // },

  data: () => ({
    items: [],
  }),
  watch: {
    $route() {
      // console.log(this.$route)
      this.items = initItem
      if (this.$route.path != '/') {
        this.items.push({
          text: this.$route.params.name,
          disabled: false,
          href: this.$route.path
        })
      }
    }
  }
};
</script>
